<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="88px"
    >
      <el-form-item label="发货单编号" prop="sendNo">
        <el-input
          v-model="queryParams.sendNo"
          placeholder="请输入发货单编号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户名称" prop="fullName">
        <el-input
          v-model="queryParams.fullName"
          placeholder="请输入客户名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>

      <el-form-item label="客户简称" prop="companyName">
        <el-input
          v-model="queryParams.companyName"
          placeholder="请输入客户简称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item v-if="isManage" label="区域代理" prop="deptId">
        <el-select
          v-model="queryParams.deptId"
          placeholder="区域代理"
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="dict in deptList"
            :key="dict.deptId"
            :label="dict.deptName"
            :value="dict.deptId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="search" size="mini" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['yanjing:send:export']"
          >导出</el-button
        >
      </el-col> -->
      <right-toolbar
        v-model:showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="sendList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" type="index" width="60"></el-table-column>
      <el-table-column label="客户编号" align="center" prop="companyCode" />
      <el-table-column label="客户名称" align="center" prop="fullName" />
      <el-table-column label="客户简称" align="center" prop="companyName" />
      <el-table-column label="发货单编号" align="center" prop="sendNo" />
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        width="180"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            size="mini"
            type="text"
            icon="View"
            @click="handleView(scope.row, scope.index)"
            >详细</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page.sync="queryParams.pageNum"
      v-model:limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" v-model="open" width="1300px" append-to-body>
      <div id="parentPage">
        <table
          style="font-size: 14px"
          cellspacing="1"
          cellpadding="4"
          border="0"
          align="center"
          id="cartTable"
          width="760"
        >
          <tr bgcolor="#FFFFFF" height="25px">
            <td align="left" colspan="4">
              <!-- <el-button @click="printTable">打印</el-button> -->
              <el-button
                v-if="send.productPage >= 1"
                @click="printTable('#printOne')"
                >打印第一页</el-button
              >
              <el-button
                v-if="send.productPage >= 2"
                @click="printTable('#printTwo')"
                >打印第二页</el-button
              >
              <el-button
                v-if="send.productPage >= 3"
                @click="printTable('#printThree')"
                >打印第三页</el-button
              >
              <el-button
                v-if="send.productPage >= 4"
                @click="printTable('#printFour')"
                >打印第四页</el-button
              >
              <el-button
                v-if="send.productPage >= 5"
                @click="printTable('#printFive')"
                >打印第五页</el-button
              >
              <el-button
                v-if="send.productPage >= 6"
                @click="printTable('#printSix')"
                >打印第六页</el-button
              >
              <el-button
                v-if="send.productPage >= 7"
                @click="printTable('#printSeven')"
                >打印第七页</el-button
              >
              <el-button
                v-if="send.productPage >= 8"
                @click="printTable('#printEight')"
                >打印第八页</el-button
              >
              <el-button
                v-if="send.productPage >= 9"
                @click="printTable('#printNine')"
                >打印第九页</el-button
              >
              <el-button
                v-if="send.productPage >= 10"
                @click="printTable('#printTen')"
                >打印第十页</el-button
              >

              <!-- 
		  <v-if test="send.productPage>=1">
		  	<input type="button" id="button_print" value="打印第一页" onclick="javascript:printitTO('div1')"> 
		  </v-if>
		  <v-if test="send.productPage>=2">
		  	<input type="button" id="button_print" value="打印第二页" onclick="javascript:printitTO('div2')"> 
		  </v-if>
		  <v-if test="send.productPage>=3">
		  	<input type="button" id="button_print" value="打印第三页" onclick="javascript:printitTO('div3')"> 
		  </v-if>		  
		  <v-if test="send.productPage>=4">
		  	<input type="button" id="button_print" value="打印第四页" onclick="javascript:printitTO('div4')"> 
		  </v-if>	
		  <v-if test="send.productPage>=5">
		  	<input type="button" id="button_print" value="打印第五页" onclick="javascript:printitTO('div5')"> 
		  </v-if>			   
		  <v-if test="send.productPage>=6">
		  	<input type="button" id="button_print" value="打印第六页" onclick="javascript:printitTO('div6')"> 
		  </v-if>		
		  <v-if test="send.productPage>=7">
		  	<input type="button" id="button_print" value="打印第七页" onclick="javascript:printitTO('div7')"> 
		  </v-if>		
		  <v-if test="send.productPage>=8">
		  	<input type="button" id="button_print" value="打印第八页" onclick="javascript:printitTO('div8')"> 
		  </v-if>		
		  <v-if test="send.productPage>=9">
		  	<input type="button" id="button_print" value="打印第九页" onclick="javascript:printitTO('div9')"> 
		  </v-if>				  
		  <v-if test="#send.productPage>=10">
		  	<input type="button" id="button_print" value="打印第十页" onclick="javascript:printitTO('div10')"> 
		  </v-if>				  		     -->
            </td>
          </tr>
        </table>

        <!--startprint-->
        <div class="con_right" id="printTest">
          <div class="con_rightCon">
            <table
              style="font-size: 14px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              align="center"
              id="cartTable"
              width="760"
            >
              <tr bgcolor="#FFFFFF" height="28px">
                <td
                  align="center"
                  colspan="6"
                  style="font-weight: 600; font-size: 20px"
                >
                  上海吾度睛制科技有限公司·发货单
                </td>
              </tr>

              <tr bgcolor="#FFFFFF" height="25px"></tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  发货单号：
                </td>
                <td width="220px" align="left">{{ send.sendNo }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  出货日期：
                </td>
                <td width="340px" align="left" colspan="3">
                  {{ send.createTime }}
                </td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  客户名称：
                </td>
                <td width="220px" align="left">{{ send.fullName }}</td>

                <td width="100px" bgcolor="#f4f4f4" align="right">联系人：</td>
                <td width="120px" align="left">{{ send.recName }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">业务员：</td>
                <td width="120px" align="left">{{ send.saleName }}</td>
              </tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收货地址：
                </td>
                <td align="left" colspan="5">{{ send.recAddress }}</td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收件人电话：
                </td>
                <td align="left" colspan="5">{{ send.recPhone }}</td>
              </tr>
            </table>

            <div style="height: 10px"></div>
            <table
              style="font-size: 12px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              bgcolor="#333333"
              width="760"
              align="center"
            >
              <tbody>
                <tr bgcolor="#f4f4f4" height="28px">
                  <th style="white-space: nowrap" align="center">订单编号</th>
                  <th style="white-space: nowrap" align="center">顾客姓名</th>
                  <th style="white-space: nowrap" align="center">R/L</th>
                  <th style="white-space: nowrap" align="center">品名</th>
                  <th style="white-space: nowrap" align="center">球镜</th>
                  <th style="white-space: nowrap" align="center">柱镜</th>
                  <th style="white-space: nowrap" align="center">轴位</th>
                  <th style="white-space: nowrap" align="center">下加光</th>
                  <th style="white-space: nowrap" align="center">瞳高</th>
                  <th style="white-space: nowrap" align="center">瞳距</th>
                  <th style="white-space: nowrap" align="center">委托加工</th>
                  <th style="white-space: nowrap" align="center">棱镜</th>
                  <th style="white-space: nowrap" align="center">防蓝光</th>
                  <th style="white-space: nowrap" align="center">数量</th>
                  <th style="white-space: nowrap" align="center">备注</th>
                </tr>
                <tr
                  v-for="(item, index) in send.productList"
                  :key="index"
                  bgcolor="#ffffff"
                >
                  <td align="center">{{ item.orderNo }}</td>
                  <td align="center">{{ item.channelUserName }}</td>
                  <td align="center">{{ item.productPlace }}</td>
                  <td align="center">{{ item.productName }}</td>
                  <td align="center">{{ item.qiujing }}</td>
                  <td align="center">{{ item.zhujing }}</td>
                  <td align="center">{{ item.zhouwei }}</td>
                  <td align="center">{{ item.add }}</td>
                  <td align="center">{{ item.tonggao }}</td>
                  <td align="center">{{ item.julitongju }}</td>
                  <td align="center">{{ item.jiagong }}</td>
                  <td align="center">{{ item.lengjing }}</td>
                  <td align="center">{{ item.huanxiang }}</td>
                 
                  <td align="center">{{ item.number }}</td>
                  <td align="center">{{ item.memo }}</td>
                </tr>

                <tr bgcolor="#ffffff">
                  <td align="left" colspan="12">
                    打印时间：{{ send.outTime }}
                  </td>
                  <td align="right">合计：</td>
                  <td align="center">{{ send.number }}</td>
                  <td align="center"></td>
                </tr>
              </tbody>
            </table>
            <div style="height: 30px"></div>
          </div>
        </div>
        <!--endprint-->

        <!--startprint-->
        <div class="invisible-div" id="printOne">
          <div class="con_rightCon">
            <table
              style="font-size: 14px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              align="center"
              id="cartTable"
              width="760"
            >
              <tr bgcolor="#FFFFFF" height="28px">
                <td
                  align="center"
                  colspan="6"
                  style="font-weight: 600; font-size: 20px"
                >
                  上海吾度睛制科技有限公司·发货单
                </td>
              </tr>

              <tr bgcolor="#FFFFFF" height="25px"></tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  发货单号：
                </td>
                <td width="220px" align="left">{{ send.sendNo }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  出货日期：
                </td>
                <td width="340px" align="left" colspan="3">
                  {{ send.createTime }}
                </td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  客户名称：
                </td>
                <td width="220px" align="left">{{ send.fullName }}</td>

                <td width="100px" bgcolor="#f4f4f4" align="right">联系人：</td>
                <td width="120px" align="left">{{ send.recName }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">业务员：</td>
                <td width="120px" align="left">{{ send.saleName }}</td>
              </tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收货地址：
                </td>
                <td align="left" colspan="5">{{ send.recAddress }}</td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收件人电话：
                </td>
                <td align="left" colspan="5">{{ send.recPhone }}</td>
              </tr>
            </table>
            <div style="height: 10px"></div>
            <table
              style="font-size: 12px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              bgcolor="#333333"
              width="760"
              align="center"
            >
              <tbody>
                <tr bgcolor="#f4f4f4" height="28px">
                  <th style="white-space: nowrap" align="center">订单编号</th>
                  <th style="white-space: nowrap" align="center">顾客姓名</th>
                  <th style="white-space: nowrap" align="center">R/L</th>
                  <th style="white-space: nowrap" align="center">品名</th>
                  <th style="white-space: nowrap" align="center">球镜</th>
                  <th style="white-space: nowrap" align="center">柱镜</th>
                  <th style="white-space: nowrap" align="center">轴位</th>
                  <th style="white-space: nowrap" align="center">下加光</th>
                  <th style="white-space: nowrap" align="center">瞳高</th>
                  <th style="white-space: nowrap" align="center">瞳距</th>
                  <th style="white-space: nowrap" align="center">委托加工</th>
                  <th style="white-space: nowrap" align="center">棱镜</th>
                  <th style="white-space: nowrap" align="center">防蓝光</th>
                  <th style="white-space: nowrap" align="center">数量</th>
                  <th style="white-space: nowrap" align="center">备注</th>
                </tr>

                <tr
                  v-for="(item, index) in send.productOneList"
                  :key="index"
                  bgcolor="#ffffff"
                >
                  <td align="center">{{ item.orderNo }}</td>
                  <td align="center">{{ item.channelUserName }}</td>
                  <td align="center">{{ item.productPlace }}</td>
                  <td align="center">{{ item.productName }}</td>
                  <td align="center">{{ item.qiujing }}</td>
                  <td align="center">{{ item.zhujing }}</td>
                  <td align="center">{{ item.zhouwei }}</td>
                  <td align="center">{{ item.add }}</td>
                  <td align="center">{{ item.tonggao }}</td>
                  <td align="center">{{ item.julitongju }}</td>
                  <td align="center">{{ item.jiagong }}</td>
                  <td align="center">{{ item.lengjing }}</td>
                  <td align="center">{{ item.huanxiang }}</td>
                  <td align="center">{{ item.number }}</td>
                  <td align="center">{{ item.memo }}</td>
                </tr>

                <tr bgcolor="#ffffff">
                  <td align="left" colspan="10">
                    打印时间：{{ send.outTime }}
                  </td>
                  <td align="right">合计：</td>
                  <td align="center">{{ send.numberOne }}</td>
                  <td align="center"></td>
                </tr>
              </tbody>
            </table>
            <div style="height: 30px"></div>
            <div style="height: 30px; text-align: center; font-size: 14px">
              共&nbsp;{{ send.productPage }}&nbsp;页 / 第&nbsp;1&nbsp;页
            </div>

            <div style="height: 30px"></div>
          </div>
        </div>
        <!--endprint-->

        <!--startprint-->
        <div class="invisible-div" id="printTwo">
          <div class="con_rightCon">
            <table
              style="font-size: 14px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              align="center"
              id="cartTable"
              width="760"
            >
              <tr bgcolor="#FFFFFF" height="28px">
                <td
                  align="center"
                  colspan="6"
                  style="font-weight: 600; font-size: 20px"
                >
                  上海吾度睛制科技有限公司·发货单
                </td>
              </tr>

              <tr bgcolor="#FFFFFF" height="25px"></tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  发货单号：
                </td>
                <td width="220px" align="left">{{ send.sendNo }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  出货日期：
                </td>
                <td width="340px" align="left" colspan="3">
                  {{ send.createTime }}
                </td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  客户名称：
                </td>
                <td width="220px" align="left">{{ send.fullName }}</td>

                <td width="100px" bgcolor="#f4f4f4" align="right">联系人：</td>
                <td width="120px" align="left">{{ send.recName }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">业务员：</td>
                <td width="120px" align="left">{{ send.saleName }}</td>
              </tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收货地址：
                </td>
                <td align="left" colspan="5">{{ send.recAddress }}</td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收件人电话：
                </td>
                <td align="left" colspan="5">{{ send.recPhone }}</td>
              </tr>
            </table>

            <div style="height: 10px"></div>
            <table
              style="font-size: 12px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              bgcolor="#333333"
              width="760"
              align="center"
            >
              <tbody>
                <tr bgcolor="#f4f4f4" height="28px">
                  <th style="white-space: nowrap" align="center">订单编号</th>
                  <th style="white-space: nowrap" align="center">顾客姓名</th>
                  <th style="white-space: nowrap" align="center">R/L</th>
                  <th style="white-space: nowrap" align="center">品名</th>
                  <th style="white-space: nowrap" align="center">球镜</th>
                  <th style="white-space: nowrap" align="center">柱镜</th>
                  <th style="white-space: nowrap" align="center">轴位</th>
                  <th style="white-space: nowrap" align="center">下加光</th>
                  <th style="white-space: nowrap" align="center">瞳高</th>
                  <th style="white-space: nowrap" align="center">瞳距</th>
                  <th style="white-space: nowrap" align="center">委托加工</th>
                  <th style="white-space: nowrap" align="center">棱镜</th>
                  <th style="white-space: nowrap" align="center">防蓝光</th>
                  <th style="white-space: nowrap" align="center">数量</th>
                  <th style="white-space: nowrap" align="center">备注</th>
                </tr>

                <tr
                  v-for="(item, index) in send.productTwoList"
                  :key="index"
                  bgcolor="#ffffff"
                >
                  <td align="center">{{ item.orderNo }}</td>
                  <td align="center">{{ item.channelUserName }}</td>
                  <td align="center">{{ item.productPlace }}</td>
                  <td align="center">{{ item.productName }}</td>
                  <td align="center">{{ item.qiujing }}</td>
                  <td align="center">{{ item.zhujing }}</td>
                  <td align="center">{{ item.zhouwei }}</td>
                  <td align="center">{{ item.add }}</td>
                  <td align="center">{{ item.tonggao }}</td>
                  <td align="center">{{ item.julitongju }}</td>
                  <td align="center">{{ item.jiagong }}</td>
                  <td align="center">{{ item.lengjing }}</td>
                  <td align="center">{{ item.huanxiang }}</td>
                  <td align="center">{{ item.number }}</td>
                  <td align="center">{{ item.memo }}</td>
                </tr>

                <tr bgcolor="#ffffff">
                  <td align="left" colspan="10">
                    打印时间：{{ send.outTime }}
                  </td>
                  <td align="right">合计：</td>
                  <td align="center">{{ send.numberTwo }}</td>
                  <td align="center"></td>
                </tr>
              </tbody>
            </table>
            <div style="height: 30px"></div>
            <div style="height: 30px; text-align: center; font-size: 14px">
              共&nbsp;{{ send.productPage }}&nbsp;页 / 第&nbsp;2&nbsp;页
            </div>

            <div style="height: 30px"></div>
          </div>
        </div>
        <!--endprint-->

        <!--startprint-->
        <div class="invisible-div" id="printThree">
          <div class="con_rightCon">
            <table
              style="font-size: 14px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              align="center"
              id="cartTable"
              width="760"
            >
              <tr bgcolor="#FFFFFF" height="28px">
                <td
                  align="center"
                  colspan="6"
                  style="font-weight: 600; font-size: 20px"
                >
                  上海吾度睛制科技有限公司·发货单
                </td>
              </tr>

              <tr bgcolor="#FFFFFF" height="25px"></tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  发货单号：
                </td>
                <td width="220px" align="left">{{ send.sendNo }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  出货日期：
                </td>
                <td width="340px" align="left" colspan="3">
                  {{ send.createTime }}
                </td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  客户名称：
                </td>
                <td width="220px" align="left">{{ send.fullName }}</td>

                <td width="100px" bgcolor="#f4f4f4" align="right">联系人：</td>
                <td width="120px" align="left">{{ send.recName }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">业务员：</td>
                <td width="120px" align="left">{{ send.saleName }}</td>
              </tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收货地址：
                </td>
                <td align="left" colspan="5">{{ send.recAddress }}</td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收件人电话：
                </td>
                <td align="left" colspan="5">{{ send.recPhone }}</td>
              </tr>
            </table>

            <div style="height: 10px"></div>
            <table
              style="font-size: 12px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              bgcolor="#333333"
              width="760"
              align="center"
            >
              <tbody>
                <tr bgcolor="#f4f4f4" height="28px">
                  <th style="white-space: nowrap" align="center">订单编号</th>
                  <th style="white-space: nowrap" align="center">顾客姓名</th>
                  <th style="white-space: nowrap" align="center">R/L</th>
                  <th style="white-space: nowrap" align="center">品名</th>
                  <th style="white-space: nowrap" align="center">球镜</th>
                  <th style="white-space: nowrap" align="center">柱镜</th>
                  <th style="white-space: nowrap" align="center">轴位</th>
                  <th style="white-space: nowrap" align="center">下加光</th>
                  <th style="white-space: nowrap" align="center">瞳高</th>
                  <th style="white-space: nowrap" align="center">瞳距</th>
                  <th style="white-space: nowrap" align="center">委托加工</th>
                  <th style="white-space: nowrap" align="center">棱镜</th>
                  <th style="white-space: nowrap" align="center">防蓝光</th>
                  <th style="white-space: nowrap" align="center">数量</th>
                  <th style="white-space: nowrap" align="center">备注</th>
                </tr>

                <tr
                  v-for="(item, index) in send.productThreeList"
                  :key="index"
                  bgcolor="#ffffff"
                >
                  <td align="center">{{ item.orderNo }}</td>
                  <td align="center">{{ item.channelUserName }}</td>
                  <td align="center">{{ item.productPlace }}</td>
                  <td align="center">{{ item.productName }}</td>
                  <td align="center">{{ item.qiujing }}</td>
                  <td align="center">{{ item.zhujing }}</td>
                  <td align="center">{{ item.zhouwei }}</td>
                  <td align="center">{{ item.add }}</td>
                  <td align="center">{{ item.tonggao }}</td>
                  <td align="center">{{ item.julitongju }}</td>
                  <td align="center">{{ item.jiagong }}</td>
                  <td align="center">{{ item.lengjing }}</td>
                  <td align="center">{{ item.huanxiang }}</td>
                  <td align="center">{{ item.number }}</td>
                  <td align="center">{{ item.memo }}</td>
                </tr>

                <tr bgcolor="#ffffff">
                  <td align="left" colspan="10">
                    打印时间：{{ send.outTime }}
                  </td>
                  <td align="right">合计：</td>
                  <td align="center">{{ send.numberThree }}</td>
                  <td align="center"></td>
                </tr>
              </tbody>
            </table>
            <div style="height: 30px"></div>
            <div style="height: 30px; text-align: center; font-size: 14px">
              共&nbsp;{{ send.productPage }}&nbsp;页 / 第&nbsp;3&nbsp;页
            </div>

            <div style="height: 30px"></div>
          </div>
        </div>
        <!--endprint-->

        <!--startprint-->
        <div class="invisible-div" id="printFour">
          <div class="con_rightCon">
            <table
              style="font-size: 14px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              align="center"
              id="cartTable"
              width="760"
            >
              <tr bgcolor="#FFFFFF" height="28px">
                <td
                  align="center"
                  colspan="6"
                  style="font-weight: 600; font-size: 20px"
                >
                  上海吾度睛制科技有限公司·发货单
                </td>
              </tr>

              <tr bgcolor="#FFFFFF" height="25px"></tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  发货单号：
                </td>
                <td width="220px" align="left">{{ send.sendNo }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  出货日期：
                </td>
                <td width="340px" align="left" colspan="3">
                  {{ send.createTime }}
                </td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  客户名称：
                </td>
                <td width="220px" align="left">{{ send.fullName }}</td>

                <td width="100px" bgcolor="#f4f4f4" align="right">联系人：</td>
                <td width="120px" align="left">{{ send.recName }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">业务员：</td>
                <td width="120px" align="left">{{ send.saleName }}</td>
              </tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收货地址：
                </td>
                <td align="left" colspan="5">{{ send.recAddress }}</td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收件人电话：
                </td>
                <td align="left" colspan="5">{{ send.recPhone }}</td>
              </tr>
            </table>

            <div style="height: 10px"></div>
            <table
              style="font-size: 12px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              bgcolor="#333333"
              width="760"
              align="center"
            >
              <tbody>
                <tr bgcolor="#f4f4f4" height="28px">
                  <th style="white-space: nowrap" align="center">订单编号</th>
                  <th style="white-space: nowrap" align="center">顾客姓名</th>
                  <th style="white-space: nowrap" align="center">R/L</th>
                  <th style="white-space: nowrap" align="center">品名</th>
                  <th style="white-space: nowrap" align="center">球镜</th>
                  <th style="white-space: nowrap" align="center">柱镜</th>
                  <th style="white-space: nowrap" align="center">轴位</th>
                  <th style="white-space: nowrap" align="center">下加光</th>
                  <th style="white-space: nowrap" align="center">瞳高</th>
                  <th style="white-space: nowrap" align="center">瞳距</th>
                  <th style="white-space: nowrap" align="center">委托加工</th>
                  <th style="white-space: nowrap" align="center">棱镜</th>
                  <th style="white-space: nowrap" align="center">防蓝光</th>
                  <th style="white-space: nowrap" align="center">数量</th>
                  <th style="white-space: nowrap" align="center">备注</th>
                </tr>

                <tr
                  v-for="(item, index) in send.productFourList"
                  :key="index"
                  bgcolor="#ffffff"
                >
                  <td align="center">{{ item.orderNo }}</td>
                  <td align="center">{{ item.channelUserName }}</td>
                  <td align="center">{{ item.productPlace }}</td>
                  <td align="center">{{ item.productName }}</td>
                  <td align="center">{{ item.qiujing }}</td>
                  <td align="center">{{ item.zhujing }}</td>
                  <td align="center">{{ item.zhouwei }}</td>
                  <td align="center">{{ item.add }}</td>
                  <td align="center">{{ item.tonggao }}</td>
                  <td align="center">{{ item.julitongju }}</td>
                  <td align="center">{{ item.jiagong }}</td>
                  <td align="center">{{ item.lengjing }}</td>
                  <td align="center">{{ item.huanxiang }}</td>
                  <td align="center">{{ item.number }}</td>
                  <td align="center">{{ item.memo }}</td>
                </tr>

                <tr bgcolor="#ffffff">
                  <td align="left" colspan="10">
                    打印时间：{{ send.outTime }}
                  </td>
                  <td align="right">合计：</td>
                  <td align="center">{{ send.numberFour }}</td>
                  <td align="center"></td>
                </tr>
              </tbody>
            </table>
            <div style="height: 30px"></div>
            <div style="height: 30px; text-align: center; font-size: 14px">
              共&nbsp;{{ send.productPage }}&nbsp;页 / 第&nbsp;4&nbsp;页
            </div>

            <div style="height: 30px"></div>
          </div>
        </div>
        <!--endprint-->

        <!--startprint-->
        <div class="invisible-div" id="printFive">
          <div class="con_rightCon">
            <table
              style="font-size: 14px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              align="center"
              id="cartTable"
              width="760"
            >
              <tr bgcolor="#FFFFFF" height="28px">
                <td
                  align="center"
                  colspan="6"
                  style="font-weight: 600; font-size: 20px"
                >
                  上海吾度睛制科技有限公司·发货单
                </td>
              </tr>

              <tr bgcolor="#FFFFFF" height="25px"></tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  发货单号：
                </td>
                <td width="220px" align="left">{{ send.sendNo }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  出货日期：
                </td>
                <td width="340px" align="left" colspan="3">
                  {{ send.createTime }}
                </td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  客户名称：
                </td>
                <td width="220px" align="left">{{ send.fullName }}</td>

                <td width="100px" bgcolor="#f4f4f4" align="right">联系人：</td>
                <td width="120px" align="left">{{ send.recName }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">业务员：</td>
                <td width="120px" align="left">{{ send.saleName }}</td>
              </tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收货地址：
                </td>
                <td align="left" colspan="5">{{ send.recAddress }}</td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收件人电话：
                </td>
                <td align="left" colspan="5">{{ send.recPhone }}</td>
              </tr>
            </table>

            <div style="height: 10px"></div>
            <table
              style="font-size: 12px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              bgcolor="#333333"
              width="760"
              align="center"
            >
              <tbody>
                <tr bgcolor="#f4f4f4" height="28px">
                  <th style="white-space: nowrap" align="center">订单编号</th>
                  <th style="white-space: nowrap" align="center">顾客姓名</th>
                  <th style="white-space: nowrap" align="center">R/L</th>
                  <th style="white-space: nowrap" align="center">品名</th>
                  <th style="white-space: nowrap" align="center">球镜</th>
                  <th style="white-space: nowrap" align="center">柱镜</th>
                  <th style="white-space: nowrap" align="center">轴位</th>
                  <th style="white-space: nowrap" align="center">下加光</th>
                  <th style="white-space: nowrap" align="center">瞳高</th>
                  <th style="white-space: nowrap" align="center">瞳距</th>
                  <th style="white-space: nowrap" align="center">委托加工</th>
                  <th style="white-space: nowrap" align="center">棱镜</th>
                  <th style="white-space: nowrap" align="center">防蓝光</th>
                  <th style="white-space: nowrap" align="center">数量</th>
                  <th style="white-space: nowrap" align="center">备注</th>
                </tr>

                <tr
                  v-for="(item, index) in send.productFiveList"
                  :key="index"
                  bgcolor="#ffffff"
                >
                  <td align="center">{{ item.orderNo }}</td>
                  <td align="center">{{ item.channelUserName }}</td>
                  <td align="center">{{ item.productPlace }}</td>
                  <td align="center">{{ item.productName }}</td>
                  <td align="center">{{ item.qiujing }}</td>
                  <td align="center">{{ item.zhujing }}</td>
                  <td align="center">{{ item.zhouwei }}</td>
                  <td align="center">{{ item.add }}</td>
                  <td align="center">{{ item.tonggao }}</td>
                  <td align="center">{{ item.julitongju }}</td>
                  <td align="center">{{ item.jiagong }}</td>
                  <td align="center">{{ item.lengjing }}</td>
                  <td align="center">{{ item.huanxiang }}</td>
                  <td align="center">{{ item.number }}</td>
                  <td align="center">{{ item.memo }}</td>
                </tr>

                <tr bgcolor="#ffffff">
                  <td align="left" colspan="10">
                    打印时间：{{ send.outTime }}
                  </td>
                  <td align="right">合计：</td>
                  <td align="center">{{ send.numberFive }}</td>
                  <td align="center"></td>
                </tr>
              </tbody>
            </table>
            <div style="height: 30px"></div>
            <div style="height: 30px; text-align: center; font-size: 14px">
              共&nbsp;{{ send.productPage }}&nbsp;页 / 第&nbsp;5&nbsp;页
            </div>

            <div style="height: 30px"></div>
          </div>
        </div>
        <!--endprint-->

        <!--startprint-->
        <div class="invisible-div" id="printSix">
          <div class="con_rightCon">
            <table
              style="font-size: 14px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              align="center"
              id="cartTable"
              width="760"
            >
              <tr bgcolor="#FFFFFF" height="28px">
                <td
                  align="center"
                  colspan="6"
                  style="font-weight: 600; font-size: 20px"
                >
                  上海吾度睛制科技有限公司·发货单
                </td>
              </tr>

              <tr bgcolor="#FFFFFF" height="25px"></tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  发货单号：
                </td>
                <td width="220px" align="left">{{ send.sendNo }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  出货日期：
                </td>
                <td width="340px" align="left" colspan="3">
                  {{ send.createTime }}
                </td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  客户名称：
                </td>
                <td width="220px" align="left">{{ send.fullName }}</td>

                <td width="100px" bgcolor="#f4f4f4" align="right">联系人：</td>
                <td width="120px" align="left">{{ send.recName }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">业务员：</td>
                <td width="120px" align="left">{{ send.saleName }}</td>
              </tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收货地址：
                </td>
                <td align="left" colspan="5">{{ send.recAddress }}</td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收件人电话：
                </td>
                <td align="left" colspan="5">{{ send.recPhone }}</td>
              </tr>
            </table>

            <div style="height: 10px"></div>
            <table
              style="font-size: 12px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              bgcolor="#333333"
              width="760"
              align="center"
            >
              <tbody>
                <tr bgcolor="#f4f4f4" height="28px">
                  <th style="white-space: nowrap" align="center">订单编号</th>
                  <th style="white-space: nowrap" align="center">顾客姓名</th>
                  <th style="white-space: nowrap" align="center">R/L</th>
                  <th style="white-space: nowrap" align="center">品名</th>
                  <th style="white-space: nowrap" align="center">球镜</th>
                  <th style="white-space: nowrap" align="center">柱镜</th>
                  <th style="white-space: nowrap" align="center">轴位</th>
                  <th style="white-space: nowrap" align="center">下加光</th>
                  <th style="white-space: nowrap" align="center">瞳高</th>
                  <th style="white-space: nowrap" align="center">瞳距</th>
                  <th style="white-space: nowrap" align="center">委托加工</th>
                  <th style="white-space: nowrap" align="center">棱镜</th>
                  <th style="white-space: nowrap" align="center">防蓝光</th>
                  <th style="white-space: nowrap" align="center">数量</th>
                  <th style="white-space: nowrap" align="center">备注</th>
                </tr>

                <tr
                  v-for="(item, index) in send.productSixList"
                  :key="index"
                  bgcolor="#ffffff"
                >
                  <td align="center">{{ item.orderNo }}</td>
                  <td align="center">{{ item.channelUserName }}</td>
                  <td align="center">{{ item.productPlace }}</td>
                  <td align="center">{{ item.productName }}</td>
                  <td align="center">{{ item.qiujing }}</td>
                  <td align="center">{{ item.zhujing }}</td>
                  <td align="center">{{ item.zhouwei }}</td>
                  <td align="center">{{ item.add }}</td>
                  <td align="center">{{ item.tonggao }}</td>
                  <td align="center">{{ item.julitongju }}</td>
                  <td align="center">{{ item.jiagong }}</td>
                  <td align="center">{{ item.lengjing }}</td>
                  <td align="center">{{ item.huanxiang }}</td>
                  <td align="center">{{ item.number }}</td>
                  <td align="center">{{ item.memo }}</td>
                </tr>

                <tr bgcolor="#ffffff">
                  <td align="left" colspan="10">
                    打印时间：{{ send.outTime }}
                  </td>
                  <td align="right">合计：</td>
                  <td align="center">{{ send.numberSix }}</td>
                  <td align="center"></td>
                </tr>
              </tbody>
            </table>
            <div style="height: 30px"></div>
            <div style="height: 30px; text-align: center; font-size: 14px">
              共&nbsp;{{ send.productPage }}&nbsp;页 / 第&nbsp;6&nbsp;页
            </div>

            <div style="height: 30px"></div>
          </div>
        </div>
        <!--endprint-->

        <!--startprint-->
        <div class="invisible-div" id="printSeven">
          <div class="con_rightCon">
            <table
              style="font-size: 14px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              align="center"
              id="cartTable"
              width="760"
            >
              <tr bgcolor="#FFFFFF" height="28px">
                <td
                  align="center"
                  colspan="6"
                  style="font-weight: 600; font-size: 20px"
                >
                  上海吾度睛制科技有限公司·发货单
                </td>
              </tr>

              <tr bgcolor="#FFFFFF" height="25px"></tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  发货单号：
                </td>
                <td width="220px" align="left">{{ send.sendNo }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  出货日期：
                </td>
                <td width="340px" align="left" colspan="3">
                  {{ send.createTime }}
                </td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  客户名称：
                </td>
                <td width="220px" align="left">{{ send.fullName }}</td>

                <td width="100px" bgcolor="#f4f4f4" align="right">联系人：</td>
                <td width="120px" align="left">{{ send.recName }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">业务员：</td>
                <td width="120px" align="left">{{ send.saleName }}</td>
              </tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收货地址：
                </td>
                <td align="left" colspan="5">{{ send.recAddress }}</td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收件人电话：
                </td>
                <td align="left" colspan="5">{{ send.recPhone }}</td>
              </tr>
            </table>

            <div style="height: 10px"></div>
            <table
              style="font-size: 12px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              bgcolor="#333333"
              width="760"
              align="center"
            >
              <tbody>
                <tr bgcolor="#f4f4f4" height="28px">
                  <th style="white-space: nowrap" align="center">订单编号</th>
                  <th style="white-space: nowrap" align="center">顾客姓名</th>
                  <th style="white-space: nowrap" align="center">R/L</th>
                  <th style="white-space: nowrap" align="center">品名</th>
                  <th style="white-space: nowrap" align="center">球镜</th>
                  <th style="white-space: nowrap" align="center">柱镜</th>
                  <th style="white-space: nowrap" align="center">轴位</th>
                  <th style="white-space: nowrap" align="center">下加光</th>
                  <th style="white-space: nowrap" align="center">瞳高</th>
                  <th style="white-space: nowrap" align="center">瞳距</th>
                  <th style="white-space: nowrap" align="center">委托加工</th>
                  <th style="white-space: nowrap" align="center">棱镜</th>
                  <th style="white-space: nowrap" align="center">防蓝光</th>
                  <th style="white-space: nowrap" align="center">数量</th>
                  <th style="white-space: nowrap" align="center">备注</th>
                </tr>

                <tr
                  v-for="(item, index) in send.productSevenList"
                  :key="index"
                  bgcolor="#ffffff"
                >
                  <td align="center">{{ item.orderNo }}</td>
                  <td align="center">{{ item.channelUserName }}</td>
                  <td align="center">{{ item.productPlace }}</td>
                  <td align="center">{{ item.productName }}</td>
                  <td align="center">{{ item.qiujing }}</td>
                  <td align="center">{{ item.zhujing }}</td>
                  <td align="center">{{ item.zhouwei }}</td>
                  <td align="center">{{ item.add }}</td>
                  <td align="center">{{ item.tonggao }}</td>
                  <td align="center">{{ item.julitongju }}</td>
                  <td align="center">{{ item.jiagong }}</td>
                  <td align="center">{{ item.lengjing }}</td>
                  <td align="center">{{ item.huanxiang }}</td>
                  <td align="center">{{ item.number }}</td>
                  <td align="center">{{ item.memo }}</td>
                </tr>

                <tr bgcolor="#ffffff">
                  <td align="left" colspan="10">
                    打印时间：{{ send.outTime }}
                  </td>
                  <td align="right">合计：</td>
                  <td align="center">{{ send.numberSeven }}</td>
                  <td align="center"></td>
                </tr>
              </tbody>
            </table>
            <div style="height: 30px"></div>
            <div style="height: 30px; text-align: center; font-size: 14px">
              共&nbsp;{{ send.productPage }}&nbsp;页 / 第&nbsp;7&nbsp;页
            </div>

            <div style="height: 30px"></div>
          </div>
        </div>
        <!--endprint-->

        <!--startprint-->
        <div class="invisible-div" id="printEight">
          <div class="con_rightCon">
            <table
              style="font-size: 14px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              align="center"
              id="cartTable"
              width="760"
            >
              <tr bgcolor="#FFFFFF" height="28px">
                <td
                  align="center"
                  colspan="6"
                  style="font-weight: 600; font-size: 20px"
                >
                  上海吾度睛制科技有限公司·发货单
                </td>
              </tr>

              <tr bgcolor="#FFFFFF" height="25px"></tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  发货单号：
                </td>
                <td width="220px" align="left">{{ send.sendNo }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  出货日期：
                </td>
                <td width="340px" align="left" colspan="3">
                  {{ send.createTime }}
                </td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  客户名称：
                </td>
                <td width="220px" align="left">{{ send.fullName }}</td>

                <td width="100px" bgcolor="#f4f4f4" align="right">联系人：</td>
                <td width="120px" align="left">{{ send.recName }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">业务员：</td>
                <td width="120px" align="left">{{ send.saleName }}</td>
              </tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收货地址：
                </td>
                <td align="left" colspan="5">{{ send.recAddress }}</td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收件人电话：
                </td>
                <td align="left" colspan="5">{{ send.recPhone }}</td>
              </tr>
            </table>

            <div style="height: 10px"></div>
            <table
              style="font-size: 12px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              bgcolor="#333333"
              width="760"
              align="center"
            >
              <tbody>
                <tr bgcolor="#f4f4f4" height="28px">
                  <th style="white-space: nowrap" align="center">订单编号</th>
                  <th style="white-space: nowrap" align="center">顾客姓名</th>
                  <th style="white-space: nowrap" align="center">R/L</th>
                  <th style="white-space: nowrap" align="center">品名</th>
                  <th style="white-space: nowrap" align="center">球镜</th>
                  <th style="white-space: nowrap" align="center">柱镜</th>
                  <th style="white-space: nowrap" align="center">轴位</th>
                  <th style="white-space: nowrap" align="center">下加光</th>
                  <th style="white-space: nowrap" align="center">瞳高</th>
                  <th style="white-space: nowrap" align="center">瞳距</th>
                  <th style="white-space: nowrap" align="center">委托加工</th>
                  <th style="white-space: nowrap" align="center">棱镜</th>
                  <th style="white-space: nowrap" align="center">防蓝光</th>
                  <th style="white-space: nowrap" align="center">数量</th>
                  <th style="white-space: nowrap" align="center">备注</th>
                </tr>

                <tr
                  v-for="(item, index) in send.productEightList"
                  :key="index"
                  bgcolor="#ffffff"
                >
                  <td align="center">{{ item.orderNo }}</td>
                  <td align="center">{{ item.channelUserName }}</td>
                  <td align="center">{{ item.productPlace }}</td>
                  <td align="center">{{ item.productName }}</td>
                  <td align="center">{{ item.qiujing }}</td>
                  <td align="center">{{ item.zhujing }}</td>
                  <td align="center">{{ item.zhouwei }}</td>
                  <td align="center">{{ item.add }}</td>
                  <td align="center">{{ item.tonggao }}</td>
                  <td align="center">{{ item.julitongju }}</td>
                  <td align="center">{{ item.jiagong }}</td>
                  <td align="center">{{ item.lengjing }}</td>
                  <td align="center">{{ item.huanxiang }}</td>
                  <td align="center">{{ item.number }}</td>
                  <td align="center">{{ item.memo }}</td>
                </tr>

                <tr bgcolor="#ffffff">
                  <td align="left" colspan="10">
                    打印时间：{{ send.outTime }}
                  </td>
                  <td align="right">合计：</td>
                  <td align="center">{{ send.numberEight }}</td>
                  <td align="center"></td>
                </tr>
              </tbody>
            </table>
            <div style="height: 30px"></div>
            <div style="height: 30px; text-align: center; font-size: 14px">
              共&nbsp;{{ send.productPage }}&nbsp;页 / 第&nbsp;8&nbsp;页
            </div>

            <div style="height: 30px"></div>
          </div>
        </div>
        <!--endprint-->

        <!--startprint-->
        <div class="invisible-div" id="printNine">
          <div class="con_rightCon">
            <table
              style="font-size: 14px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              align="center"
              id="cartTable"
              width="760"
            >
              <tr bgcolor="#FFFFFF" height="28px">
                <td
                  align="center"
                  colspan="6"
                  style="font-weight: 600; font-size: 20px"
                >
                  上海吾度睛制科技有限公司·发货单
                </td>
              </tr>

              <tr bgcolor="#FFFFFF" height="25px"></tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  发货单号：
                </td>
                <td width="220px" align="left">{{ send.sendNo }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  出货日期：
                </td>
                <td width="340px" align="left" colspan="3">
                  {{ send.createTime }}
                </td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  客户名称：
                </td>
                <td width="220px" align="left">{{ send.fullName }}</td>

                <td width="100px" bgcolor="#f4f4f4" align="right">联系人：</td>
                <td width="120px" align="left">{{ send.recName }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">业务员：</td>
                <td width="120px" align="left">{{ send.saleName }}</td>
              </tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收货地址：
                </td>
                <td align="left" colspan="5">{{ send.recAddress }}</td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收件人电话：
                </td>
                <td align="left" colspan="5">{{ send.recPhone }}</td>
              </tr>
            </table>

            <div style="height: 10px"></div>
            <table
              style="font-size: 12px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              bgcolor="#333333"
              width="760"
              align="center"
            >
              <tbody>
                <tr bgcolor="#f4f4f4" height="28px">
                  <th style="white-space: nowrap" align="center">订单编号</th>
                  <th style="white-space: nowrap" align="center">顾客姓名</th>
                  <th style="white-space: nowrap" align="center">R/L</th>
                  <th style="white-space: nowrap" align="center">品名</th>
                  <th style="white-space: nowrap" align="center">球镜</th>
                  <th style="white-space: nowrap" align="center">柱镜</th>
                  <th style="white-space: nowrap" align="center">轴位</th>
                  <th style="white-space: nowrap" align="center">下加光</th>
                  <th style="white-space: nowrap" align="center">瞳高</th>
                  <th style="white-space: nowrap" align="center">瞳距</th>
                  <th style="white-space: nowrap" align="center">委托加工</th>
                  <th style="white-space: nowrap" align="center">棱镜</th>
                  <th style="white-space: nowrap" align="center">防蓝光</th>
                  <th style="white-space: nowrap" align="center">数量</th>
                  <th style="white-space: nowrap" align="center">备注</th>
                </tr>

                <tr
                  v-for="(item, index) in send.productNineList"
                  :key="index"
                  bgcolor="#ffffff"
                >
                  <td align="center">{{ item.orderNo }}</td>
                  <td align="center">{{ item.channelUserName }}</td>
                  <td align="center">{{ item.productPlace }}</td>
                  <td align="center">{{ item.productName }}</td>
                  <td align="center">{{ item.qiujing }}</td>
                  <td align="center">{{ item.zhujing }}</td>
                  <td align="center">{{ item.zhouwei }}</td>
                  <td align="center">{{ item.add }}</td>
                  <td align="center">{{ item.tonggao }}</td>
                  <td align="center">{{ item.julitongju }}</td>
                  <td align="center">{{ item.jiagong }}</td>
                  <td align="center">{{ item.lengjing }}</td>
                  <td align="center">{{ item.huanxiang }}</td>
                  <td align="center">{{ item.number }}</td>
                  <td align="center">{{ item.memo }}</td>
                </tr>

                <tr bgcolor="#ffffff">
                  <td align="left" colspan="10">
                    打印时间：{{ send.outTime }}
                  </td>
                  <td align="right">合计：</td>
                  <td align="center">{{ send.numberNine }}</td>
                  <td align="center"></td>
                </tr>
              </tbody>
            </table>
            <div style="height: 30px"></div>
            <div style="height: 30px; text-align: center; font-size: 14px">
              共&nbsp;{{ send.productPage }}&nbsp;页 / 第&nbsp;9&nbsp;页
            </div>

            <div style="height: 30px"></div>
          </div>
        </div>
        <!--endprint-->

        <!--startprint-->
        <div class="invisible-div" id="printTen">
          <div class="con_rightCon">
            <table
              style="font-size: 14px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              align="center"
              id="cartTable"
              width="760"
            >
              <tr bgcolor="#FFFFFF" height="28px">
                <td
                  align="center"
                  colspan="6"
                  style="font-weight: 600; font-size: 20px"
                >
                  上海吾度睛制科技有限公司·发货单
                </td>
              </tr>

              <tr bgcolor="#FFFFFF" height="25px"></tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  发货单号：
                </td>
                <td width="220px" align="left">{{ send.sendNo }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  出货日期：
                </td>
                <td width="340px" align="left" colspan="3">
                  {{ send.createTime }}
                </td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  客户名称：
                </td>
                <td width="220px" align="left">{{ send.fullName }}</td>

                <td width="100px" bgcolor="#f4f4f4" align="right">联系人：</td>
                <td width="120px" align="left">{{ send.recName }}</td>
                <td width="100px" bgcolor="#f4f4f4" align="right">业务员：</td>
                <td width="120px" align="left">{{ send.saleName }}</td>
              </tr>

              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收货地址：
                </td>
                <td align="left" colspan="5">{{ send.recAddress }}</td>
              </tr>
              <tr bgcolor="#FFFFFF" height="28px">
                <td width="100px" bgcolor="#f4f4f4" align="right">
                  收件人电话：
                </td>
                <td align="left" colspan="5">{{ send.recPhone }}</td>
              </tr>
            </table>

            <div style="height: 10px"></div>
            <table
              style="font-size: 12px"
              cellspacing="1"
              cellpadding="4"
              border="0"
              bgcolor="#333333"
              width="760"
              align="center"
            >
              <tbody>
                <tr bgcolor="#f4f4f4" height="28px">
                  <th style="white-space: nowrap" align="center">订单编号</th>
                  <th style="white-space: nowrap" align="center">顾客姓名</th>
                  <th style="white-space: nowrap" align="center">R/L</th>
                  <th style="white-space: nowrap" align="center">品名</th>
                  <th style="white-space: nowrap" align="center">球镜</th>
                  <th style="white-space: nowrap" align="center">柱镜</th>
                  <th style="white-space: nowrap" align="center">轴位</th>
                  <th style="white-space: nowrap" align="center">下加光</th>
                  <th style="white-space: nowrap" align="center">瞳高</th>
                  <th style="white-space: nowrap" align="center">瞳距</th>
                  <th style="white-space: nowrap" align="center">委托加工</th>
                  <th style="white-space: nowrap" align="center">棱镜</th>
                  <th style="white-space: nowrap" align="center">防蓝光</th>
                  <th style="white-space: nowrap" align="center">数量</th>
                  <th style="white-space: nowrap" align="center">备注</th>
                </tr>

                <tr
                  v-for="(item, index) in send.productTenList"
                  :key="index"
                  bgcolor="#ffffff"
                >
                  <td align="center">{{ item.orderNo }}</td>
                  <td align="center">{{ item.channelUserName }}</td>
                  <td align="center">{{ item.productPlace }}</td>
                  <td align="center">{{ item.productName }}</td>
                  <td align="center">{{ item.qiujing }}</td>
                  <td align="center">{{ item.zhujing }}</td>
                  <td align="center">{{ item.zhouwei }}</td>
                  <td align="center">{{ item.add }}</td>
                  <td align="center">{{ item.tonggao }}</td>
                  <td align="center">{{ item.julitongju }}</td>
                  <td align="center">{{ item.jiagong }}</td>
                  <td align="center">{{ item.lengjing }}</td>
                  <td align="center">{{ item.huanxiang }}</td>
                  <td align="center">{{ item.number }}</td>
                  <td align="center">{{ item.memo }}</td>
                </tr>

                <tr bgcolor="#ffffff">
                  <td align="left" colspan="10">
                    打印时间：{{ send.outTime }}
                  </td>
                  <td align="right">合计：</td>
                  <td align="center">{{ send.numberTen }}</td>
                  <td align="center"></td>
                </tr>
              </tbody>
            </table>
            <div style="height: 30px"></div>
            <div style="height: 30px; text-align: center; font-size: 14px">
              共&nbsp;{{ send.productPage }}&nbsp;页 / 第&nbsp;10&nbsp;页
            </div>

            <div style="height: 30px"></div>
          </div>
        </div>
        <!--endprint-->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryPageByParam,
  getSend,
  delSend,
  addSend,
  updateSend,
  view,
} from "@/api/order/send.js";
import useUserStore from "@/store/modules/user";
import { listDept } from "@/api/system/dept";
import { getDataByChildDictType } from "@/api/system/dict/data";
export default {
  name: "Send",
  data() {
    return {
      defaultDeptId: null,
      deptList: [],
      isManage: false,
      send: {},
      isDetail: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      sendList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sendNo: null,
        companyId: null,
        orderIds: null,
        STATUS: null,
        recName: null,
        recPhone: null,
        recAddress: null,
        createTime: null,
        createEmployeeId: null,
        updateTime: null,
        updateEmployeeId: null,
        companyCode: null,
        companyName: null,
        fullName: null,
        startTime: "",
        endTime: "",
        rangeTime: ["", ""],
        deptId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    };
  },
  created() {
    const roles = useUserStore().roles;
    var filteredArr = roles.filter(
      (item) => item !== "manage" && item !== "salesman"
    );
    if (filteredArr.length > 0) {
      this.isManage = true;
    } else {
      this.isManage = false;
    }
    this.getDataByChildDictType();
    this.getList();
  },
  methods: {
    getDataByChildDictType() {
      const dictValue = "mange_dept_id_key";
      getDataByChildDictType(dictValue).then((response) => {
        this.defaultDeptId = response.data.dictLabel;
        this.getlistDept(this.defaultDeptId);
      });
    },

    /** 查询部门列表 */
    getlistDept(defaultDeptId) {
      const queryDeptListParams = {
        parentId: defaultDeptId,
      };

      listDept(queryDeptListParams).then((response) => {
        this.deptList = response.data;
      });
    },
    //打印页面内容
    printTable(value) {
      // 获取要打印的内容
      let wpt = document.querySelector(value);
      if (!wpt) return; // 如果没有找到指定的元素，直接返回
      // 创建一个 iframe 作为打印容器
      let printFrame = document.createElement("iframe");
      printFrame.style.position = "absolute";
      printFrame.style.width = "0px";
      printFrame.style.height = "0px";
      printFrame.style.border = "none";
      document.body.appendChild(printFrame);
      // 将要打印的内容写入 iframe
      let frameDocument = printFrame.contentWindow.document;
      frameDocument.open();
      frameDocument.write(`
    <html>
      <head>
        <title>打印</title>
        <style>
          /* 将你的样式复制到打印页面 */
          @media print {
            @page {
              margin-top: 0;
              margin-bottom: 0;
            }
            body {
              padding-top: 100px;
              padding-bottom: 0;
            }
          }
          body {
            font-family: Arial, sans-serif;
          }
        </style>
      </head>
      <body>
        ${wpt.innerHTML}
      </body>
    </html>
  `);
      frameDocument.close();
      // 调用打印
      printFrame.contentWindow.focus();
      printFrame.contentWindow.print();
      // 打印后移除 iframe
      printFrame.addEventListener("afterprint", () => {
        document.body.removeChild(printFrame);
      });
      // 为了兼容不支持 afterprint 事件的浏览器，设置延时移除 iframe
      setTimeout(() => {
        if (document.body.contains(printFrame)) {
          document.body.removeChild(printFrame);
        }
      }, 1000);
    },
    handleView(row) {
      const sendId = row.sendId;
      view(sendId).then((response) => {
        this.form = response.data;
        this.send = response.data;
        this.open = true;
        this.isDetail = false;
        this.title = "发货单详情";
      });
    },

    /** 查询列表 */
    getList() {
      this.loading = true;
      queryPageByParam(this.queryParams).then((response) => {
        this.sendList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        sendId: null,
        sendNo: null,
        companyId: null,
        orderIds: null,
        STATUS: null,
        recName: null,
        recPhone: null,
        recAddress: null,
        createTime: null,
        createEmployeeId: null,
        updateTime: null,
        updateEmployeeId: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.sendId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const sendId = row.sendId || this.ids;
      getSend(sendId).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.sendId != null) {
            updateSend(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSend(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const sendIds = row.sendId || this.ids;
      this.$modal
        .confirm('是否确认删除编号为"' + sendIds + '"的数据项？')
        .then(function () {
          return delSend(sendIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "yanjing/send/export",
        {
          ...this.queryParams,
        },
        `send_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style>
@media print {
  @page {
    margin-top: 0;
    margin-bottom: 0;
  }
  body {
    padding-top: 100px;
    padding-bottom: 0;
  }
}

.invisible-div {
  display: none;
}
</style>